<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
</head>
<body>
	<div id="watch-example">
		<p>
			Ask a yes/no question:
			<input v-model="question">
		</p>
		<p>{{ answer }}</p>
	</div>
	<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
	<script>
		var watchExampleVM = new Vue({
			el: '#watch-example',
			data: {
				question: '',
				answer: 'I cannot give you answer until you ask a question!'
			},
			watch: {
				question: function(newQuestion) {
					this.answer = 'Waiting you to stop typing...';
					this.getAnswer();
				}
			},
			methods: {
				getAnswer: _.debounce(
					function() {
						var vm = this;
						if(this.question.indexOf('?') === -1){
							vm.answer = 'Question usually contain a question mark.';
							return;
						}
						vm.answer = 'Thinking...';
						axios.get('https://yesno.wtf/api')
							.then(function(response) {
								vm.answer = _.capitalize(response.data.answer);
							})
							.catch(function(error) {
								vm.answer = 'Error! Could not reach the API.' + error;
							})
					},
					500
				)
			}
		})
	</script>
</body>
</html>